<template>
	<view>
		<view class="user-head" style="position: relative;overflow: hidden;">
				<image src="../../static/assets/images/user-bg.jpeg" 
				mode="heightFix" class="gui-absolute-lt" style="height:750rpx;z-index: -100;"></image>
			<view class="gui-padding">
				<text class="user-title gui-color-white">个人中心</text>
			</view>
			<view class="gui-list gui-padding">
				<view class="gui-list-items">
					<view class="gui-list-image ucenter-face gui-relative">
						<image class="gui-list-image ucenter-face-image" style="will-change: transform;"
							:src="user&&user.avatarUrl" mode="aspectFill">
						</image>
					</view>
					<view class="gui-list-body">
						<view class="gui-color-white" v-if="user&&user.nickName">
							<text class="">{{user.nickName}}</text>
						</view>
						<view class="gui-flex">
							<u-icon name="phone-fill" color="#ccc" size="24"></u-icon>
							<text class="gui-color-white">
								{{user&&user.mobile}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="ucenter-line gui-bg-white gui-dark-bg-level-3"></view>
		<view class="gui-list gui-margin-top gui-padding-x">
			<view class="gui-list-items">
				<u-icon name="grid-fill" color="#2A82E4" size="28"></u-icon>
				<view class="gui-list-body gui-border-b" @tap="toAppt">
					<view class="gui-list-title">
						<text class="gui-list-title-text">我的预约</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
			<view class="gui-list-items">
				<u-icon name="shopping-cart-fill" color="#2A82E4" size="28"></u-icon>
				<view class="gui-list-body gui-border-b" @tap="toSale">
					<view class="gui-list-title">
						<text class="gui-list-title-text">我的课程</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>

			<view class="gui-list-items">
				<u-icon name="list-dot" color="#2A82E4" size="28"></u-icon>
				<view class="gui-list-body" @tap="toSign">
					<view class="gui-list-title">
						<text class="gui-list-title-text">签到历史</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
		</view>
		<view class="gui-padding-x">
			<view class="gui-list-items">
				<u-icon name="gift-fill" color="#2A82E4" size="28"></u-icon>
				<view class="gui-list-body gui-border-b" @tap="toActivity">
					<view class="gui-list-title">
						<text class="gui-list-title-text">我的活动</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>

		</view>
		<view class="gui-padding-x">
			<view class="gui-list-items">
				<u-icon name="shopping-cart-fill" color="#2A82E4" size="28"></u-icon>
				<view class="gui-list-body gui-border-b" @tap="toGroupActivity">
					<view class="gui-list-title">
						<text class="gui-list-title-text">我的拼团</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
		</view>

		<view class="ucenter-line gui-bg-white gui-dark-bg-level-3"></view>

		<view class="gui-padding-x">
			<view class="gui-list-items">
				<u-icon name="share-fill" color="#2A82E4" size="28"></u-icon>
				<button class="share gui-list-body gui-border-b" open-type="share">
					<view class="gui-list-title">
						<text class="gui-list-title-text">分享</text>
					</view>
				</button>
			</view>

		</view>

		<view class="ucenter-line gui-bg-white gui-dark-bg-level-3"></view>
		<view hover-class="gui-tap" @tap="logout">
			<text class="gui-text-center gui-block-text gui-icons logoff gui-color-white gui-bg-red">&#xe62e;
				退出登录
			</text>
		</view>
	</view>
</template>
<script>
	import useUser from '@/api/user'
	import request from '@/utils/request';
	import base from '@/utils/base'
	import graceJS from '@/Grace6/js/grace.js';
	const host = `${base.host}/api`
	const {
		getUserInfo,
		userInfoState,
	} = useUser()
	export default {
		data() {
			return {
				showPop: false,
				user: userInfoState,
				scene: null,
				imgSrc: "",
				showCodePop: false,
			}
		},
		async created() {
			await getUserInfo()
		},
		onLoad(query) {
			// console.log(query)
			const scene = decodeURIComponent(query.scene)
			// console.log("scene", scene)
			this.scene = scene
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			return {
				title: '火烈鸟游泳',
				path: `/pages/index/index`
			}
		},
		methods: {
			async logout() {
				await request.get("mini/logout")
				uni.reLaunch({
					url: "/subpage/user/login"
				})
			},
			toActivity() {
				uni.navigateTo({
					url: `/subpage/user/activity`
				})
			},
			toAppt() {
				uni.navigateTo({
					url: `/subpage/user/appt`
				})
			},
			toSale() {
				uni.navigateTo({
					url: `/subpage/user/sale`
				})
			},
			toSign() {
				uni.navigateTo({
					url: `/subpage/user/sign`
				})
			},
			toGroupActivity() {
				uni.navigateTo({
					url: `/subpage/user/groupactivity`
				})
			}
		},
	}
</script>
<style scoped lang="scss">
	.user-head {
		position: relative;
		background-position: center left;
		border-radius: 0px 0px 15px 15px;
		height:330rpx;
		box-shadow:
			2.8px 2.8px 2.2px rgba(0, 0, 0, 0.016),
			6.7px 6.7px 5.3px rgba(0, 0, 0, 0.023),
			12.5px 12.5px 10px rgba(0, 0, 0, 0.029),
			22.3px 22.3px 17.9px rgba(0, 0, 0, 0.036),
			41.8px 41.8px 33.4px rgba(0, 0, 0, 0.046),
			100px 100px 80px rgba(0, 0, 0, 0.07);
	}

	.user-title {
		font-size: 60rpx;
		font-weight: 500;
	}

	.ucenter-face {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-face-image {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-line {
		height: 20rpx;
		margin: 16rpx 0;
	}

	.logoff {
		line-height: 88rpx;
		font-size: 28rpx;
	}

	.gui-list-title-text {
		line-height: 60rpx;
	}

	.share {
		border: none;

		&::after {
			border: none;
		}
	}

</style>